<template>
	<!-- 输入搜索信息 -->
	<view class="loadSearch" style="padding: 50rpx 50rpx;">
		<u--form labelPosition="left" :model="msgForm" labelWidth="140rpx" ref="msgForm">
			<u-form-item label="运单号" prop="billNo" borderBottom>
				<u--input v-model="msgForm.billNo" border="none"></u--input>
			</u-form-item>
			<u-form-item label="货物名称" prop="dgsName" borderBottom>
				<u--input v-model="msgForm.dgsName" border="none"></u--input>
			</u-form-item>
			<u-form-item label="卸货日期" borderBottom>
				<view class="timeText" @click="timeShow = !timeShow">
					<view class="time_i">
						<u-icon name="photo" color="#007AFF" size="30"></u-icon>
						<view class="" v-if="!msgForm.beginDate.length>0">开始日期</view>
						<view class="" v-else>{{msgForm.beginDate}}</view>
					</view>
					<view class="">——</view>
					<view class="time_i">
						<u-icon name="photo" color="#007AFF" size="30"></u-icon>
						<view class="" v-if="!msgForm.endDate.length>0">结束日期</view>
						<view class="" v-else>{{msgForm.endDate}}</view>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="车牌号" prop="vehCode" borderBottom>
				<u--input v-model="msgForm.vehCode" border="none"></u--input>
			</u-form-item>
			<u-form-item label="承运企业" prop="carriageName" borderBottom>
				<u--input v-model="msgForm.carriageName" border="none"></u--input>
			</u-form-item>
			<u-form-item label="卸货单号" prop="loadNo" borderBottom>
				<u--input v-model="msgForm.loadNo" border="none"></u--input>
			</u-form-item>
		</u--form>
		<view class="changeBtn">
			<u-button type="primary" color='#007AFF' class="custom-style" @click="getSearch" size="large" text="查询"></u-button>
			<u-button type="primary" color='#007AFF' class="custom-style" @click="resetForm('msgForm')" size="large" text="重置"></u-button>
		</view>
		<!-- 日期选择 -->
		<u-calendar :show="timeShow" mode="range" @confirm="timeConfirm"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msgForm: {
					endDate: '',
					beginDate: '',
				},
				timeShow: false,
			};
		},
		methods: {
			//时间选择
			timeConfirm(e) {
				console.log(e);
				this.msgForm.beginDate = e[0]
				this.msgForm.endDate = e[e.length - 1]
				this.timeShow = !this.timeShow
			},
			// 分页查询
			getSearch() {
				this.$goBack('/pages/dgs_qy/load-goods/unload-query/unloadQuery?msgForm=' + encodeURIComponent(JSON.stringify(this.msgForm)))
			},
			//重置
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.msgForm.beginDate = ''
				this.msgForm.endDate=''
			},
		},

	}
</script>

<style lang='scss' scoped>
	.loadSearch{
		
	}
	.timeText {
		width: 100%;
		display: flex;
		justify-content: space-around;

		.time_i {
			display: flex;
			align-items: center;
		}
	}

	.changeBtn {
		width: 500rpx;
		margin: 0 auto;

		.custom-style {
			margin-top: 30rpx;
			box-shadow: 0px 0px 14px 1px rgba(120, 206, 253, 0.3);
		}
	}
</style>
